<script setup lang="ts">
import useUserList from '@/components/index/followig/hooks/userList'
const { isSelected, users, page, showPage, pageSize, pageTotal, clickPage } = useUserList()
import { useRouter } from 'vue-router'
const router = useRouter()
const getUserData = (id: string) => {
  router.push({ name: 'info', query: { id } })
}
</script>

<template>
  <el-pagination
    ref="page"
    background
    layout="prev, pager, next"
    :hide-on-single-page="true"
    v-show="showPage"
    :page-size="pageSize"
    :total="pageTotal"
    @current-change="clickPage($event)"
  />
  <ul id="userlist">
    <li
      v-for="item in users"
      :key="item.id"
      :class="{ active: isSelected === item.id }"
      @click="getUserData(item.id)"
    >
      <img :src="item.img" alt="" />
      <b>{{ item.name }}</b>
    </li>
  </ul>
</template>

<style scoped>
div {
  justify-content: center;
  margin-bottom: 10px;
  --el-color-primary: var(--color2);
}
.active {
  outline: 2px solid var(--color3);
  color: var(--color3);
}
#userlist {
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  flex-wrap: wrap;
  gap: 10px;
  li:hover {
    background-color: var(--color2);
    outline: 2px solid var(--color3);
  }
  li:hover > b {
    color: #fff;
  }
  > li {
    cursor: pointer;

    list-style: none;
    border-radius: var(--radius);
    background-color: var(--color2);
    padding: 5px;
    > img {
      display: block;
      margin: 0 auto;
      width: 64px;
      height: 64px;
    }
    > b {
      display: block;
      width: 64px;
      margin: 4px auto 0;
      text-align: center;
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--color-font);
    }
  }
}
</style>
